<template>
    <div class="shopAll">
        <head-top></head-top>
        <div class="info">
            <el-form
                :inline="true"
                :model="searchValue"
                class="demo-form-inline search-box"
                :label-width="labelWidth"
                size="medium"
            >
                <el-form-item label="商户名称">
                    <el-input v-model="searchValue.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model.number="searchValue.mobile"></el-input>
                </el-form-item>
                <el-form-item class="flexBox">
                    <el-button type="primary" @click="dataInit">
                        搜索
                        <i class="el-icon-search el-icon--right"></i>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="tablebox">
                <el-button size="small" @click="addShop" type="primary">新增总店</el-button>
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="name" label="商户名" width="180"></el-table-column>
                    <el-table-column prop="mobile" label="电话" width="180"></el-table-column>
                    <el-table-column prop="maxNum" label="下属商户数量" width="120"></el-table-column>
                    <el-table-column label="状态" width="120">
                        <template slot-scope="scope">
                            <span>{{ states[scope.row.state - 1] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClick(scope.row,'del')"
                                type="text"
                                size="small"
                            >删除</el-button>
                            <el-button
                                @click="handleClick(scope.row,'edit')"
                                type="text"
                                size="small"
                            >编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :title="types[shoptype]" :visible.sync="dialogVisible" width="60%">
            <el-form :model="shopForm" label-width="150px" :rules="rules" ref="shopForm">
                <el-form-item label="商户名称" prop="name">
                    <el-input v-model="shopForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="shopForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="下属商户数量" prop="maxNum">
                    <el-input type="number" v-model="shopForm.maxNum"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="shopForm.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveShopFn('shopForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import headTop from "@/components/headTop";
import { shopQuery, shopSave, shopUpdata, shopDelete } from "../server/api.js";
export default {
    name: "shopAll",
    components: {
        headTop
    },
    data() {
        return {
            searchValue: {},
            states: ["未激活", "已激活", "封禁"],
            dialogVisible: false,
            labelWidth: "100px",
            tableData: [
                // {
                //     name: "七八九火锅",
                //     mobile: "13122334455",
                //     num: 10,
                //     address: "上海市普陀区金沙江路 1518 弄"
                // }
            ],
            shopForm: {
                maxNum: 10,
                level: 1
            },
            rules: {
                name: [
                    { required: true, message: "请输入商户名", trigger: "blur" }
                ],
                mobile: [
                    { required: true, message: "请输入手机号", trigger: "blur" }
                ],
                maxNum: [
                    { required: true, message: "请输入数量", trigger: "blur" }
                ]
            },
            types: {
                edit: "编辑商户",
                add: "新增商户"
            },
            shoptype: "add"
        };
    },
    created() {
        this.dataInit();
    },
    methods: {
        async dataInit() {
            let params = this.searchValue;
            params.level = 1;
            var _list = await shopQuery(params);
            this.tableData = _list;
        },
        onSubmit() {},
        addShop() {
            this.shoptype = "add";
            // this.$refs.shopForm.resetFields();
            this.shopForm = {
                maxNum: 10,
                level: 1
            }
            this.dialogVisible = true;
        },
        async saveShopFn(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    try {
                        if (!this.shopForm.id) {
                            let _list = await shopSave(this.shopForm);
                            this.dataInit();
                        } else {
                            let _list = await shopUpdata(this.shopForm);
                            this.dataInit();
                        }
                        this.dialogVisible = false;
                    } catch (error) {
                        this.$message({
                            type: "error",
                            message: error
                        });
                    }
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: "请输入必要信息",
                        offset: 100
                    });
                    return false;
                }
            });
        },
        handleClick(row, type) {
            if (type === "del") {
                this.$confirm("是否删除该总店?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true
                })
                    .then(async () => {
                        try {
                            let _list = await shopDelete({
                                id: row.id
                            });

                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.tableData = _list;
                        } catch (error) {
                            this.$message({
                                type: "error",
                                message: error
                            });
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            } else {
                // 编辑
                this.shoptype = "edit";
                this.shopForm = this.$.cloneObj(row);
                this.dialogVisible = true;
            }
        }
    }
};
</script>
<style lang="less">
.shopAll {
    .info {
        padding: 20px;
    }
    .tablebox {
        padding-top: 10px;
    }
}
</style>